<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%
	boolean elephantMayKillRat = (request.getParameter("elephant-kill-rat") != null);
	boolean tigerEqualsLion = (request.getParameter("tiger-equals-lion") != null);
	boolean leopardJump = (request.getParameter("leopard-jump") != null);
	boolean lionJump = (request.getParameter("lion-jump") != null);
	boolean universalTraps = (request.getParameter("universal-traps") != null);
	boolean foxReplacesWolf = (request.getParameter("fox-replaces-wolf") != null);
	boolean attackFromWater = (request.getParameter("attack-from-water") != null);
	boolean highLevelAnimalsMayEnterTraps = (request.getParameter("high-level-enter-traps") != null);
	boolean dogCanSwim = (request.getParameter("dog-swim") != null);
%>
<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Jungle Chess</title>
	
	<link rel="stylesheet" href="css/blueprint/reset.css" />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

	<script type="text/javascript">
		var alternateRules = {
			tigerEqualsLion : <%=tigerEqualsLion%>,
			foxReplacesWolf : <%=foxReplacesWolf%>,
			attackFromWater : <%=attackFromWater%>,
			highLevelAnimalsMayEnterTraps : <%=highLevelAnimalsMayEnterTraps%>,
			universalTraps : <%=universalTraps%>,
			elephantMayKillRat : <%=elephantMayKillRat%>,
			leopardJump : <%=leopardJump%>,
			lionJump : <%=lionJump%>,
			dogCanSwim : <%=dogCanSwim%>
		};
	</script>
	
	<link rel="stylesheet" href="css/jungle-chess.css" />
	<script type="text/javascript" src="js/jungle-chess.js"></script>
</head>
<body>

	<h1>Jungle Chess</h1>

	<div id="content" ng-app="jungle-chess" ng-controller="JungleChessController">

		<div id="gameContainer">

			<table id="playerColors">
				<tr>
					<td>Player 1:</td>
					<td><div class="player1"></div></td>
				</tr>
				<tr>
					<td>Player 2:</td>
					<td><div class="player2"></div></td>
				</tr>
			</table>

			<div id="board">
				<div class="row" ng-repeat="row in board">
					<div class="cell {{cell.type}}" ng-repeat="cell in row" ng-click="cellClicked($parent.$index, $index)">
						<div ng-show="cell.selected || cell.movementShadow || cell.attackShadow" class="cell-overlay"
							ng-class="{ 'animal-selected' : cell.selected, 'move-shadow' : cell.movementShadow, 'attack-shadow' : cell.attackShadow  }"></div>
						<img src="images/placeholder.png" ng-show="cell.animal" ng-src="{{cell.getAnimalPicture()}}" class="contentImage"
							ng-class="cell.animal.player.name" />
						<p class="power-level" ng-show="cell.animal">{{cell.animal.powerLevel}}</p>
					</div>
				</div>
			</div>

			<button ng-click="resetBoard()">Reset board</button>

		</div>

	</div>

</body>
</html>